.instruction {
  text-align: center;
}

.board {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: auto;
  border: 2px solid black;
  width: min(90vw, 100vh - 160px);
  height: min(90vw, 100vh - 160px);

  div {
    display: flex;
    width: 100%;
    height: 100%;

    button.box {
      display: flex;
      flex-grow: 1;
      cursor: pointer;
      border: none;
    }

    button:focus-visible {
      outline: 4px solid yellowgreen;
      z-index: 1;
    }
  }

  div:nth-child(even) button:nth-child(odd) {
    background-color: black;
  }

  div:nth-child(odd) button:nth-child(even) {
    background-color: black;
  }

  div button.box.selected {
    transition: background-color 0.33s;
    background-color: red;
  }

  div button.box.clicked {
    background-color: darkred;
  }
}
